// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { plateDetail, cardList, plateFollow, cardLike } from '../../module/module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList } from '../../components/index.js'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, borderTop, pathHead, requestCardLike, requestCardFollowAccount, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class CardPost extends Component {

	static propTypes = {

	}

	constructor(props) {
		super(props)
		this.state = {
			like: props.data.like || false,
			follow: props.data.follow || false
		}
	}


	handleCardLike(like) {
		const { handleCardLike, data } = this.props
		this.setState({
			like: !like
		})
		requestCardLike.call(this, { id: data.id, type: like ? 0 : 1 }).then(res => {
			handleCardLike ? handleCardLike(like) : null
		})
	}

	// follow 1:关注，0取消关注
	handleCardFollowAccount(follow) {
		const { handleCardLike, data } = this.props
		this.setState({
			follow: follow
		})
		requestCardFollowAccount.call(this, { id: data.accountId, type: follow ? 1 : 0 }).then(res => {
			handleCardLike ? handleCardLike() : null
		})
	}

	render() {
		const { user, data, handleCardLike, hideNav } = this.props
		const { follow, like } = this.state
		let likeCount = data.likeCount
		// 默认是收藏，如果现在的收藏为false 
		// 收藏的情况下点击了取消收藏
		if (data.like && !like) {
			likeCount = likeCount - 1
		}
		// 如果默认是未收藏，现在的收藏为true
		// 未收藏的情况下点击了收藏
		if (!data.like && like) {
			likeCount = likeCount + 1
		}
		return (
			<View style={{
				padding: 15,
				paddingLeft: 0,
				backgroundColor: '#fff',
				...borderBottom()
			}}>
				<TouchableOpacity onPress={() => Actions.cardPostDetail({ id: data.id })}>
					<View style={{}}>
						<View style={{
							flexDirection: 'row',
							alignItems: 'center',
						}}>
							<CacheImage
								resizeMod={"contain"}
								style={{
									marginRight: 10,
									width: 42,
									height: 42,
									borderRadius: 21,
									overflow: 'hidden'
								}}
								source={{ uri: `${pathHead}${data.avatar}` }}

							/>
							<View style={{ flex: 1 }}>
								<Text style={{ fontSize: 14, color: '#333', lineHeight: 16, marginBottom: 10 }}>{data.nickname}</Text>
								<Text style={{ fontSize: 14, color: '#999', lineHeight: 16, }}>{data.createTime}</Text>
							</View>
							{/* 关注状态是false并且不是当前用户显示关注 */}
							{follow && data.accountId != user.id && (
								<TouchableOpacity
									style={{
										paddingVertical: 5,
										paddingHorizontal: 15,
										borderRadius: 10,
										borderWidth: 1,
										borderColor: '#000000'
									}}
									onPress={() => {
										// 关注传 false 0
										this.handleCardFollowAccount(false)
									}}
								>
									<Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>取消关注</Text>
								</TouchableOpacity>
							)}
							{/* 关注状态是false并且不是当前用户显示关注 */}
							{!follow && data.accountId != user.id && (
								<TouchableOpacity
									style={{
										paddingVertical: 5,
										paddingHorizontal: 15,
										borderRadius: 10,
										borderWidth: 1,
										borderColor: '#000000'
									}}
									onPress={() => {
										console.log(data)
										// 关注传 true 1
										this.handleCardFollowAccount(true)
									}}
								>
									<Text style={{ fontSize: 16, color: '#8B8B8D', lineHeight: 18, }}>关注</Text>
								</TouchableOpacity>
							)}
						</View>
						<View style={{ marginBottom: 10 }}>
							<Text style={{ fontSize: 18, color: '#61676F', lineHeight: 20, marginVertical: 10 }}>{data.title}</Text>
							<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{data.content}</Text>
						</View>
						<View style={{ flexDirection: 'row', flexWrap: 'wrap', paddingleft: 5 }}>
							{data.imgList && data.imgList.length == 1 && (
								<View style={{}}>
									<CacheImage
										resizeMod={"contain"}
										style={{
											marginRight: 5,
											width: ScreenWidth - 30 - 5,
											height: ScreenWidth - 30 - 5,
											overflow: 'hidden'
										}}
										source={{ uri: `${pathHead}${data.imgList[0]}` }}

									/>
								</View>
							)}
							{data.imgList && data.imgList.length > 1 && (data.imgList.map((imgItem, imgIndex) => {
								return (
									<View style={{}} key={imgIndex}>
										<CacheImage
											resizeMod={"contain"}
											style={{
												marginRight: 5,
												width: (ScreenWidth - 30 - 5) / 3,
												height: (ScreenWidth - 30 - 5) / 3,
												overflow: 'hidden'
											}}
											source={{ uri: `${pathHead}${imgItem}` }}

										/>
									</View>
								)
							}))}
						</View>
					</View>
				</TouchableOpacity>
				{!hideNav && (
					<View style={{
						marginTop: 10,
						paddingTop: 10,
						flexDirection: 'row',
						alignItems: 'center',
						...borderTop()
					}}>
						<TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.cardPostDetail({ id: data.id })}>
							<View style={{
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
							}}>
								<Icon name="ios-chatbubbles" size={20} color={'#61676F'} />
								<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{data.commentCount}</Text>
							</View>
						</TouchableOpacity>
						{/* <TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.cardPostDetail({ id: data.id })}>
						<View style={{
							flexDirection: 'row',
							alignItems: 'center',
							justifyContent: 'center',
						}}>
							<Icon name="ios-star" size={20} color={'#61676F'} />
							<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{data.commentCount}</Text>
						</View>
					</TouchableOpacity> */}
						{/* <HnaldeLive data={data} handleCardLike={handleCardLike} /> */}
						<TouchableOpacity style={{ flex: 1 }} onPress={() => this.handleCardLike(like)}>
							<View style={{
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
							}}>
								<Icon name="ios-heart" size={20} color={like ? '#E5C67B' : '#61676F'} />
								<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{likeCount}</Text>
							</View>
						</TouchableOpacity>
						<TouchableOpacity style={{ flex: 1 }} onPress={() => Actions.cardPostDetail({ id: data.id })}>
							<View style={{
								flexDirection: 'row',
								alignItems: 'center',
								justifyContent: 'center',
								flex: 1,
							}}>
								<Icon name="ios-person" size={20} color={'#61676F'} />
								<Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, marginLeft: 10 }}>{data.readCount}</Text>
							</View>
						</TouchableOpacity>
					</View>
				)}
			</View>
		)
	}
}

export default connect(({ user }) => ({
	user,
}))(pureRender(CardPost))
